<template>
	<view>
		<nav-bar title="修改密码"></nav-bar>
		<view class="contain">
			<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item label="新密码："  ref="item1" labelWidth="70" v-if="!showPassword"> <!-- borderBottom  border="none"-->
					<u--input v-model="userInfo.password" type="password"></u--input>
					<u-icon slot="right" name="eye-fill" size="24" @click="iconClick"></u-icon>
				</u-form-item>
				<u-form-item label="新密码："  ref="item1" labelWidth="70" v-else>
					<u--input v-model="userInfo.password"></u--input>
					<u-icon slot="right" name="eye" size="24" @click="iconClick"></u-icon>
				</u-form-item>
				<view class="title">请输入新密码</view>
				<u-form-item label="新密码："  ref="item1" labelWidth="70" v-if="!showNewPass">
					<u--input v-model="userInfo.newPassword" type="password"></u--input>
					<u-icon slot="right" name="eye-fill" size="24" @click="iconNewClick"></u-icon>
				</u-form-item>
				<u-form-item label="新密码："  ref="item1" labelWidth="70" v-else>
					<u--input v-model="userInfo.newPassword"></u--input>
					<u-icon slot="right" name="eye" size="24" @click="iconNewClick"></u-icon>
				</u-form-item>
				<view class="title">请再次输入新密码</view>
			</u--form>
			<view class="button" @click="submit">保存</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import tabIndex from '../../components/statis/tab-index.vue'
	import {
		editPassword,
		logout
	} from '@/api/system/mine'
	export default {
		name: 'uploadPhoto',
		components: {
			NavBar,
			tabIndex
		},
		data() {
			return {
				mainHeight: '',
				userId: '',
				userInfo: {
					oldPassword: '',
					newPassword: '',
					password: ''
				},
				rules: {},
				showPassword: false,
				showNewPass: false
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
			this.userId = uni.getStorageSync('userId')
		},
		methods: {
			submit() {
				if (!this.userInfo.password) {
					uni.showToast({
						title: '请输入新密码！',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.userInfo.newPassword) {
					uni.showToast({
						title: '请再次输入新密码！',
						icon: 'none',
						mask: true
					})
					return
				}
				if (this.userInfo.password !== this.userInfo.newPassword) {
					uni.showToast({
						title: '两次密码输入不一致！',
						icon: 'none',
						mask: true
					})
					return
				}
				const params = {
					password: this.userInfo.password,
					userId: this.userId
				}
				editPassword(params).then((res) => {
					if (res.code === 200) {
						this.$refs.uToast.show({
							message: '修改成功'
						})
						this.logout()
					}
				})
			},
			logout() {
				logout().then((res) => {
					if (res.code === 200) {
						uni.redirectTo({
							url: '/pages/login',
						})
					}
				})
			},
			iconClick() {
				this.showPassword = !this.showPassword
			},
			iconNewClick() {
				this.showNewPass = !this.showNewPass
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		height: calc(100vh - 100px);
		width: 100%;
		background-color: #fff;
		padding: 40rpx 30rpx 60rpx;
		position: relative;
		box-sizing: border-box;

		.title {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);
			margin-top: 10rpx;
		}

		.button {
			width: calc(100% - 60rpx);
			height: 80rpx;
			border-radius: 46rpx;
			background: rgba(194, 126, 21, 1);
			text-align: center;
			line-height: 80rpx;
			position: absolute;
			bottom: 10%;
			font-size: 40rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);

		}
	}
</style>